<template>
	<n-form ref="formRef" :model="formData" :label-width="80" :rules="rules"   label-placement="left">
		<n-space vertical>
			<n-space :wrap-item="false">
				<n-form-item label="上级部门" path="parentId">
					<n-tree-select :options="obj2any(deptTree)" label-field="name" key-field="id" children-field="children" filterable
						v-model:value="formData.parentId" clearable />
				</n-form-item>
				<n-form-item label="部门名" path="name">
					<n-input v-model:value="formData.name" clearable />
				</n-form-item>
			</n-space>
			<n-space :vertical="false">
				<n-form-item label="排序" path="weight" class="w-275px">
					<n-input-number v-model:value="formData.weight" />
				</n-form-item>
				<n-form-item label="状态" path="status" class="w-275px">
            <n-radio-group v-model:value="formData.status">
                <n-space>
                    <n-radio label="启用" :value="BusinessStatus.Yes" />
                    <n-radio label="禁用" :value="BusinessStatus.No" />
                </n-space>
            </n-radio-group>
				</n-form-item>
			</n-space>
			<n-space>
				<n-form-item label="负责人" path="leader">
					<n-input v-model:value="formData.leader" clearable />
				</n-form-item>
				<n-form-item label="联系电话" path="phone">
					<n-input v-model:value="formData.phone" clearable />
				</n-form-item>
			</n-space>
			<n-space>
				<n-form-item label="邮箱" path="email">
					<n-input v-model:value="formData.email" clearable />
				</n-form-item>
			</n-space>
		</n-space>

	</n-form>
	<n-space justify="center">
		<n-button @click="handleSubmitForm">确定</n-button>
		<n-button @click="hendleCloseModal">取消</n-button>
	</n-space>
</template>

<script  setup lang='ts' >
import { FormInst } from 'naive-ui';
import { ref, toRefs, watch, unref } from 'vue';
import { fetchUpdateDept, fetchAddDept } from '@/service/api/sys/dept'
import { SysDept } from './index'
import { BusinessStatus } from '~/src/enum';
import { obj2any } from "@/utils/common"
import { FlatResponseData } from '~/packages/axios/src/type';

interface DataSource extends SysDept { }
type Props = {
	formData: DataSource, deptTree: DataSource[]
}
const props = defineProps<Props>()
const formRef = ref<FormInst | null>(null)
const { formData, deptTree } = toRefs(props)
const filterTree = ref<DataSource[] | null>()
const rules = {
	name:{ required: true, message: "请输入部门名", trigger: 'input' }
}

watch(deptTree, (n, o) => {
	const ft: DataSource[] = JSON.parse(JSON.stringify(unref(n)))
	filterTree.value = handleFilterTree(ft, formData?.value?.id);
})


const emit = defineEmits(["list", "close"])

function hendleCloseModal() {
	emit("close")
}
function handleFetchResult(res: FlatResponseData<any, App.Service.Response<unknown>>) {
	if (!res.error) {
		hendleCloseModal()
		emit("list")

	}
}
function handleSubmitForm() {
	formRef.value?.validate(e => {
		if (!e) {
			const value = formData.value
			if (value.id) {
				fetchUpdateDept(formData.value).then(handleFetchResult)
			} else {
				fetchAddDept(formData.value).then(handleFetchResult)
			}
		}
	})
}
function handleFilterTree(list: DataSource[], id?: Common.IdType): DataSource[] | null {
	if (!list || list.length == 0 || id == undefined || id == null) return null;
	let toFilterIndex = -1;
	for (let i = 0; i < list.length; i++) {
		const temp = list[i]
		if (temp.id === id) {
			toFilterIndex = i;
			break;
		}
		temp.children = handleFilterTree(temp.children!, id)
	}
	if (toFilterIndex > -1) {
		list.splice(toFilterIndex, 1)
	}
	return list;
}
</script>

<style lang='scss' scoped>
</style>
